<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet"  href="/layui/css/layui.css"/>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>用户列表</title>
</head>
<body>
<script src="/plugins/jquery/jquery-1.10.2.min.js"></script>
<script  src="/layui/layui.js"></script>
<script src="/plugins/js/common.js"></script>
<script src="/layui/treeSelect.js"></script>
<form class="layui-form" action="/user/addUser" id="saveForm">
	<br>
	<div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">真实姓名：</label>
	      <div class="layui-input-inline">
	        <input type="tel" name="realName" placeholder="请输入真实姓名" lay-verify="required" autocomplete="off" style="width: 260px;" class="layui-input">
	      </div>
	    </div>
  </div>
  <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">登录名：</label>
	      <div class="layui-input-inline">
	        <input type="tel" name="userName" placeholder="请输入登录名" lay-verify="required" style="width: 260px;" autocomplete="off" class="layui-input">
	      </div>
	    </div>
  </div>
   <div class="layui-form-item">
	    <div class="layui-inline">
	      <label class="layui-form-label">联系方式：</label>
	      <div class="layui-input-inline">
	        <input type="tel" name="phone" placeholder="请输入联系方式" lay-verify="required|phone" autocomplete="off" class="layui-input">
	      </div>
	      <div class="layui-form-mid layui-word-aux">联系方式默认为登录密码</div>
	    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色：</label>
     <div class="layui-input-block">
      <input type="radio" name="roleId" th:each="role:${roleList}" lay-verify="required" th:value="${role.id}" th:title="${role.roleName}">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">所属区域：</label>
     <div class="layui-input-block">
<!--       <input type="hidden" name="areaId" id="areaId"> -->
      <input type="text" id="selectArea" name="areaId" lay-filter="selectArea" lay-verify="required" style="width: 300px;" placeholder="选择区域" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="saveUser">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script type="text/javascript">
layui.config({
    base: '/layui/' //假设这是test.js所在的目录
});
layui.use(['form','treeSelect'], function(){
	 form = layui.form;
	 form.on('submit(saveUser)', function(data){
		  $.post("",JSON.stringify(data.field));
		  $.ajax({
              url: "/user/addUser",
              data: data.field,
              type: "post",
              success: function (result) {
            	if(result){
            		parent.search("添加成功");
            	}else{
            		layMsg("添加失败，请稍后重试",2000);
            	}
            	var index = parent.layer.getFrameIndex(window.name);
            	setTimeout(function(){parent.layer.close(index)}, 2000);
              },
              error: function (result) {
            	  layMsg("请求异常",2000);
              }
		});
	return false;	  
	});
	 
	 var treeSelect= layui.treeSelect;
	 // 初始化下拉选择器
     treeSelect.render({
         // css选择器，推荐使用id
         elem: '#selectArea',   
         // 请求地址
         data: '/area/showAreaInfoTreeSelect', 
         // ajax请求方式：post/get
         type: 'post',  
         // 返回数据中主键的属性名称，默认值为id
         key: {
             id: 'id',
         },
         // 节点点击回调函数
         click: function (obj,d) {
//         	 $("#areaId").val(obj.id);
         }
     });
     /* 
      *  手动设置占位符placeholder（不常用）
      *  第一个参数为lay-filter属性的值
      *  第二个参数为需要修改的提示内容
      */
     treeSelect.setTitle('selectArea', '请选择区域');
     
     /* 
      *  选中节点（常用于更新时默认选中节点）
      *  第一个参数为lay-filter属性的值
      *  第二个参数为需要选中的节点的id
      */
//      treeSelect.checkNode('selectArea', 0);
	 
});


</script>
</body>
</html>